<template>
  <div class="xtx-wrapper">
    <!-- 吸顶头部 -->
    <app-header-stick :cateList="cateList"></app-header-stick>
    <!-- 顶部通栏 -->
    <app-topnav></app-topnav>
    <!-- 网站头部 -->
    <app-header :cateList="cateList"></app-header>
    <!-- 主体内容-二级路由 -->
    <router-view></router-view>
    <!-- 网站底部 -->
    <app-footer></app-footer>
    <!-- 回到顶部 -->
    <app-backtop></app-backtop>
  </div>
</template>
<script>
import AppTopnav from '@/components/app-topnav'
import AppHeader from '@/components/app-header'
import AppFooter from '@/components/app-footer'
import AppBacktop from '@/components/app-backtop'
import AppHeaderStick from '@/components/app-header-stick'
export default {
  name: 'layout',
  components: { AppTopnav, AppHeader, AppFooter, AppHeaderStick, AppBacktop },
  data () {
    return {
      cateList: []
    }
  },
  created () {
    this.getCate()
  },
  methods: {
    async getCate () {
      if (!this.$root.cateList) {
        const { data } = await this.$http.get('home/category/head')
        this.$root.cateList = data.result
      }
      this.cateList = this.$root.cateList.map(item => {
        item.isOpen = false
        return item
      })
    }
  }
}
</script>
